<template>
  <!--平台油卡影视订单管理 -->
  <div class="app-container">
    <Form
      v-if="showSearch"
      v-model:formData="searchInfo"
      :formItems="formItems"
    >
      <template #footer>
        <div style="text-align: left">
          <el-button size="small" icon="Search" type="primary" @click="goSearch"
            >搜素</el-button
          >
          <el-button size="small" icon="Refresh" @click="resetSearch"
            >重置</el-button
          >
        </div>
      </template>
    </Form>

    <h3></h3>
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <!-- v-hasPermi="['api:v1:merchantMoviesOrderExport']"-->
        <el-button
          plain
          icon="Top"
          type="primary"
          size="small"
          @click="exportOrder"
          v-hasPermi="['member:movies:export']"
          >导出
        </el-button>

        <!--  v-hasPermi="['api:v1:changeMerchantMoviesOrderStatus']"-->
        <!-- 商户不允许修改状态 -->
        <!-- <el-button
          :disabled="!!!checkList.length"
          plain
          icon="Edit"
          type="primary"
          size="small"
          @click="changeOrderStatus"
          >修改订单状态
        </el-button> -->
      </el-col>
      <right-toolbar
        v-model:showSearch="showSearch"
        @queryTable="resetSearch"
      ></right-toolbar>
    </el-row>
    <h3></h3>
    <x-table
      :isBorder="false"
      :isLoading="isLoading"
      :propList="propList"
      :tableData="info.items"
      isShowExpand
      isShowCheckBox
      @selection-change="handleSelectionChange"
    >
      <template #expand="{ row }">
        <Form labelWidth="118px" :formItems="tableFormItems" :formData="row">
          <template #plat_status>
            <span v-if="row.plat_status == 1">未扣款</span>
            <span v-if="row.plat_status == 2">已扣款</span>
            <span v-if="row.plat_status == 3">已退款</span>
          </template>
          <template #auto_check_seat>
            <span>{{ row.auto_check_seat ? "同意" : "不同意" }}</span>
          </template>
          <template #commision_money1>
            <span v-if="row.commision_info">{{
              row.commision_info.commision_money1 || 0
            }}</span>
            <span v-else>0</span>
          </template>
          <template #commision_money2>
            <span v-if="row.commision_info">{{
              row.commision_info.commision_money2 || 0
            }}</span>
          </template>
          <template #pic>
            <el-image
              :preview-src-list="[row.pic]"
              :src="row.pic"
              style="width: 60px; height: 100px"
            ></el-image>
          </template>
          <template #fast_if>
            <span>{{ row.fast_if ? "支持" : "不支持" }}</span>
          </template>
          <template #fast_buy>
            <span>{{ row.fast_buy ? "走快速通道" : "优惠通道" }}</span>
          </template>
          <template #seat_data>
            <!-- {{ row.seat_data }} -->

            <span
              style="margin-right: 10px"
              v-for="i in getSeatData(row)"
              :key="i.seatId"
              >{{ i.seatNo }}
            </span>
          </template>
        </Form>
      </template>
      <template #refund_status="scope">
        <el-tag v-if="scope.row.refund_status == 0" :disable-transitions="true">
          未退款
        </el-tag>
        <el-tag
          v-if="scope.row.refund_status == 1"
          :disable-transitions="true"
          type="warning"
        >
          退款中
        </el-tag>
        <el-tag
          v-if="scope.row.refund_status == 2"
          :disable-transitions="true"
          type="success"
        >
          退款成功
        </el-tag>
        <el-tag
          v-if="scope.row.refund_status == 3"
          :disable-transitions="true"
          type="danger"
        >
          退款失败
        </el-tag>
      </template>
      <template #order_status="{ row }">
        <!-- 油卡订单状态同充值订单状态 -->
        <el-tag v-if="row.order_status == 1" effect="dark"> 下单成功 </el-tag>
        <el-tag v-if="row.order_status == 2" type="info" effect="dark">
          出票中
        </el-tag>
        <el-tag v-if="row.order_status == 3" type="success" effect="dark">
          出票成功
        </el-tag>
        <el-tag v-if="row.order_status == 4" type="danger" effect="dark">
          出票失败
        </el-tag>
        <el-tag v-if="row.order_status == 5" type="warning" effect="dark">
          压单
        </el-tag>
        <el-tag v-if="row.order_status == 6" type="danger" effect="dark">
          订单超时
        </el-tag>
        <el-tag v-if="row.order_status == 7" type="success" effect="dark">
          订单完成
        </el-tag>
      </template>
      <template #pay_status="{ row }">
        <el-tag v-if="row.pay_status == 1" type="success" effect="dark">
          已支付
        </el-tag>
        <el-tag v-else type="info" effect="dark"> 未支付 </el-tag>
      </template>
      <template #created_at="{ row }">
        <span>{{ row.created_at }}</span>
        <br />
        <span>{{ row.updated_at }}</span>
      </template>
      <template #third_rebate="{ row }">
        <span>{{ (row.third_rebate * 0.8).toFixed(2) }}</span>
      </template>
      <template #commission_status="{ row }">
        <!-- 1待返利2已返利3无效 -->
        <el-tag v-if="row.commision_status == 2" type="success" effect="dark">
          已返利
        </el-tag>
        <el-tag v-if="row.commision_status == 1" effect="dark"> 待返利 </el-tag>
        <el-tag v-if="row.commision_status == 3" type="danger" effect="dark">
          无效
        </el-tag>
      </template>
      <template #op="{ row }">
        <!-- v-hasPermi="['api:v1:getOrderInfoFromThirdForAdmin']" -->
        <!-- v-if="
            (row.refund_status == 0 || row.refund_status == 3) &&
            row.pay_status == 1
          " -->
        <el-button
          v-hasPermi="['member:movies:refund']"
          plain
          icon="position"
          type="primary"
          link
          size="small"
          @click="refund(row)"
          >退款
        </el-button>
        <el-button
          v-hasPermi="['member:movies:getOrderInfoFromThirdForAdmin']"
          v-if="row.order_status == 3"
          plain
          icon="View"
          type="primary"
          link
          size="small"
          @click="lookCode(row)"
          >查看取票二维码
        </el-button>
      </template>
    </x-table>
    <pagination
      v-show="info.total > 0"
      :total="info.total"
      v-model:page="searchInfo.pageNum"
      v-model:limit="searchInfo.pageSize"
      @pagination="getInfo"
    />
    <Dialog
      :isLoading="dialogLoading1"
      width="50%"
      :title="dialogConfig.title"
      v-model="isShowDialog"
      @confirm="submit"
    >
      <Form ref="formRef" v-bind="dialogConfig.formConfig"> </Form>
    </Dialog>
    <Dialog
      width="30%"
      :title="refundDialogConfig.title"
      v-model:isShowDialog="refundIsShowDialog"
      :isLoading="isSubmitLoading"
      @confirm="refundSubmit"
    >
      <Form ref="refundFormRef" v-bind="refundDialogConfig.formConfig"> </Form>
    </Dialog>
    <Dialog
      width="50%"
      :title="dialogConfig2.title"
      v-model:isShowDialog="isShowDialog2"
    >
      <div style="display: flex; justify-content: center">
        <Form ref="formRef2" v-bind="dialogConfig2.formConfig">
          <template #code_info="{ row }">
            <div style="display: flex; flex-wrap: wrap">
              <div class="code-item" v-for="item in row.tickets" :key="item.id">
                <el-image
                  style="width: 100px; height: 100px"
                  :src="item.old_imgs_wz"
                  :preview-src-list="
                    row.tickets.map((item) => item.old_imgs_wz)
                  "
                >
                </el-image>
                <p>
                  座位信息:{{
                    item.seat_items && item.seat_items[0].position_seat
                  }}
                </p>
                <p>取票码:{{ getCodeNum(item) }}</p>
              </div>
            </div>
          </template>
        </Form>
      </div>
    </Dialog>
  </div>
</template>

<script>
import {
  dialogConfig,
  propList,
  formItems,
  defaultFormData,
  tableFormItems,
  sendThis,
  dialogConfig2,
  refundDialogConfig,
} from "./config";
import {
  getList,
  refund,
  getOrderInfoFromThirdForAdmin,
} from "@/api/member/moviesOrder";
import { getPayAllList } from "@/api/member/paySet";

export default {
  name: "merchantmoviesOrderindex",
  // dicts: ["movies_order_status"],
  data() {
    return {
      isSubmitLoading: false,
      refundIsShowDialog: false,
      refundDialogConfig,
      dialogLoading1: false,
      dialogConfig2,
      tableFormItems,
      dialogConfig,
      propList,
      formItems,
      showSearch: true,
      checkList: [],
      isLoading: true,
      isShowDialog: false,
      isShowDialog2: false,
      info: {},
      searchInfo: {
        pageNum: 1,
        pageSize: 10,
        created_at: this.getTimeFilterDefault(true),
      },
    };
  },
  computed: {},
  created() {
    this.init();
  },
  mounted() {
    // 保存this
    sendThis(this);
  },
  methods: {
    init() {
      this.getInfo();
      this.getPayAllList();
    },
    async getPayAllList() {
      const { data } = await getPayAllList();
      // 赋值表单数据
      this.formItems.forEach((item) => {
        if (item.prop == "payment_id") {
          item.options = data;
        }
      });
    },
    async getInfo() {
      this.isLoading = true;
      const params = { ...this.searchInfo };
      const { data } = await getList(params);
      console.log(data);
      this.info = data;
      this.isLoading = false;
    },

    getCodeNum(item) {
      let str = "";
      if (item.old_text_info) {
        str += item.old_text_info;
      } else if (item.text_info) {
        str += item.text_info;
      }
      if (item.old_text_ycode) {
        str += "|" + item.old_text_ycode;
      }
      return str || "暂无数据";
    },
    refundSubmit() {
      this.$refs.refundFormRef.validate(async (valid) => {
        if (valid) {
          this.isSubmitLoading = true;
          try {
            await refund(this.refundDialogConfig.formConfig.formData);
            this.$message.success("操作成功");
            this.refundIsShowDialog = false;
            this.getInfo();
          } finally {
            this.isSubmitLoading = false;
          }
        }
      });
    },
    refund(item) {
      console.log(item);
      this.refundIsShowDialog = true;
      this.refundDialogConfig.formConfig.formData = { ...item };
    },
    changeOrderStatus() {
      if (!this.checkList.length) {
        return this.$message.error("请选择需要修改的项");
      }
      this.dialogConfig.formConfig.formItems.forEach((item) => {
        if (item.prop == "select_num") {
          item.defaultValue = this.checkList.length + "";
        }
        if (item.prop == "password") {
          item.isHide = true;
        }
      });
      this.isShowDialog = true;
      this.dialogConfig.formConfig.formData = {};

      this.$nextTick(() => {
        // 重置表单验证
        this.$refs.formRef.resetFields();
      });
    },
    getSeatData(row) {
      if (row.seat_data) {
        console.log(row.seat_data);
        return JSON.parse(row.seat_data);
      } else {
        return [];
      }
    },
    radiaChange(value) {
      console.log(value);
      this.dialogConfig.formConfig.formItems.forEach((item) => {
        if (item.prop == "password") {
          if (value == 4) {
            item.isHide = false;
          } else {
            item.isHide = true;
          }
        }
      });
    },
    exportOrder() {
      const orderIds = this.checkList.map((item) => item.id) || [];
      console.log(orderIds);
      if (orderIds.length) {
        this.download(
          "member/movies/export",
          { ids: orderIds },
          "商户电影订单导出[" + this.parseTime(new Date().getTime()) + "].csv"
        );
      } else {
        const obj = { ...this.searchInfo };
        // obj.created_at = [obj.params.beginTime, obj.params.endTime];
        // delete obj.params;
        this.download(
          "member/movies/export",
          obj,
          "商户电影订单导出[" + this.parseTime(new Date().getTime()) + "].csv"
        );
      }
    },
    reSubmit(type) {
      //type  1  压单 2  拦截
      if (!this.checkList.length) {
        this.$message.error("请选择需要操作的订单");
        return false;
      }
      //重置表单
      this.isShowDialog = true;
      // 目的是清除上一次的选择记录
      this.dialogConfig.formConfig.formData = { ...defaultFormData };
      this.$nextTick(() => {
        // 重置表单验证
        this.$refs.formRef.resetFields();
      });
      this.dialogConfig.formConfig.formItems.forEach((item) => {
        if (item.prop == "select_num") {
          item.defaultValue = this.checkList.length + "";
        }
        if (item.prop == "password" || item.prop == "channel_id") {
          if (this.dialogConfig.formConfig.formData.is_change_channel == 1) {
            item.isHide = true;
          } else {
            item.isHide = false;
          }
        }
      });
    },
    async lookCode(item) {
      console.log("lookCode");
      this.isShowDialog2 = true;
      const { data } = await getOrderInfoFromThirdForAdmin(item.id);
      this.dialogConfig2.formConfig.formData = { ...data };
      console.log(this.dialogConfig2.formConfig.formData);
      // this.is
    },
    // onDictReady(dictData) {
    //   // 字典数据获取完成,写入表单
    //   this.formItems.forEach((item) => {
    //     if (item.prop == "order_status") {
    //       item.options = dictData.type.movies_order_status;
    //     }
    //   });
    // },
    resetSearch() {
      this.searchInfo = this.$options.data.call(this).searchInfo;
      this.searchInfo.created_at = this.getTimeFilterDefault(true);
      this.getInfo();
    },
    goSearch() {
      // 重置时间
      this.getInfo();
    },
    submit() {
      this.$refs.formRef.validate(async (valid) => {
        if (valid) {
          const params = { ...this.dialogConfig.formConfig.formData };
          params.ids = this.checkList.map((item) => item.id);
          console.log(params);
          this.dialogLoading1 = true;
          try {
            await changeOrderStatus(params);
            this.$message.success("操作成功!");
            this.isShowDialog = false;
            this.getInfo();
          } finally {
            this.dialogLoading1 = false;
          }
        }
      });
    },
    submit2() {
      this.$refs.formRef2.validate(async (valid) => {
        if (valid) {
          const params = { ...this.dialogConfig2.formConfig.formData };
          params.ids = this.checkList.map((item) => item.id);
          console.log(params);
        }
      });
    },
    handleSelectionChange(val) {
      console.log(val);
      this.checkList = val;
    },
  },
};
</script>

<style lang="scss" scoped>
.code-item {
  margin-right: 30px;
  margin-bottom: 30px;
  text-align: center;
}
</style>
